<template>
    <div class="list">
        <div class="header">
            <div class="header_top">
                <img class="logo" src="@/assets/logo.png" alt="" />
                <img class="language" src="@/assets/EN-17.png" v-if="locale == 'zh-CN'" alt="" @click="toggleLang()" />
                <img class="language" src="@/assets/CH-17.png" alt="" v-else @click="toggleLang()" />
            </div>
            <div class="title">
                <p class="title_cn">洲际商务</p>
                <p class="title_en">IHG Commercial</p>
            </div>
        </div>
        <div class="content">
            <div class="item" v-for="(item, index) in list" :key="index">
                <div class="item_top">
                    <div class="top1">{{ locale == "zh-CN" ? item.cn_title : item.eu_title }}</div>
                    <!-- top2 top3 为了拼出后面的弧度 -->
                    <div class="top2"></div>
                    <div class="top3"></div>
                </div>
                <div class="item_bottom">
                    <div class="bottom1">
                        <div class="yinyong_item" v-for="(it, inx) in item.app_info" @click="handleToUrl(it)">
                            <img class="icon" :src="it.logo" alt="" />
                            <div class="name">{{ locale == "zh-CN" ? it.cn_title : it.eu_title }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { app_lists, app_visit } from "@/api/list";
import { useLanguage } from "@/hooks/useLanguage";
import { showLoadingToast } from "vant";

const { locale, toggleLang } = useLanguage();

//应用列表
const list = ref([]);

//获取应用列表
const getList = async () => {
    let slt = showLoadingToast({ message: "加载中...", forbidClick: true });
    try {
        let res = await app_lists();
        console.log(res);
        list.value = res.data;
        slt.close();
    } catch (error) {
        console.log(error);
        slt.close();
    }
};

//跳转到对应应用
const handleToUrl = async (obj) => {
    //添加访问记录
    await app_visit({ app_id: obj.id });

    // 在跳转前标记需要刷新
    sessionStorage.setItem("needRefreshOnBack", "true");
    window.location.href = obj.app_url;
};

function setRootFontSize() {
    const html = document.documentElement;
    const width = window.innerWidth;
    const baseSize = width > 750 ? 75 : 37.5;
    html.style.fontSize = baseSize + "px";
}

// 处理页面恢复
const handlePageShow = (event) => {
    setRootFontSize();

    // 检查是否需要刷新
    const needRefresh = sessionStorage.getItem("needRefreshOnBack");
    if (event.persisted && needRefresh === "true") {
        sessionStorage.removeItem("needRefreshOnBack");
        // 延迟刷新以确保页面完全恢复
        setTimeout(() => {
            window.location.reload();
        }, 100);
    }
};

onMounted(() => {
    // 移除之前的 reload 调用
    getList();
    setRootFontSize();

    // 监听页面显示事件
    window.addEventListener("pageshow", handlePageShow);
});

onUnmounted(() => {
    // 清理事件监听器
    window.removeEventListener("pageshow", handlePageShow);
});
</script>
<style lang="scss" scoped>
.list {
    width: 100%;
    height: 100vh;
    background-color: #d9e5ec;

    .header {
        width: 100%;
        height: 480px;
        background-image: url("@/assets/list_bg.png");
        background-repeat: no-repeat;
        background-size: cover;
        padding: 0 30px;

        .header_top {
            width: 100%;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .logo {
                width: 186px;
                height: 33px;
            }

            .language {
                width: 77px;
                height: 33px;
            }
        }

        .title {
            margin-top: 60px;
            color: #1f4456;
            line-height: 60px;
            .title_cn {
                font-weight: bold;
                font-size: 68px;
                margin-bottom: 20px;
            }

            .title_en {
                font-size: 46px;
            }
        }
    }

    .content {
        width: 750px;
        height: calc(100vh - 400px);
        overflow: auto;
        position: fixed;
        left: 50%;
        transform: translate(-50%, 0);
        bottom: 0;
        padding: 0 30px;

        .item {
            width: 100%;
            height: max-content;
            // min-height: 208px;
            margin-bottom: 40px;

            .item_top {
                width: 100%;
                height: 40px;
                display: flex;

                .top1 {
                    width: fit-content;
                    max-width: calc(100% - 180px);
                    height: 40px;
                    background-color: #244e5f;
                    border-radius: 20px 0 0 0;
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    color: #fff;
                    padding: 40px 40px 0;
                    font-weight: bold;
                    font-size: 34px;
                    line-height: 34px;
                    word-break: keep-all;
                }

                .top2 {
                    width: 70px;
                    height: 40px;
                    position: relative;
                    background-color: #244e5f;
                    transform: skew(25deg);
                    border-radius: 0 25px 0 25px;
                    left: -35px;
                }

                .top2::before {
                    content: "";
                    display: block;
                    position: absolute;
                    right: -25px;
                    bottom: 0;
                    width: 25px;
                    height: 25px;
                    background: radial-gradient(circle at 100% 0, transparent 25px, #244e5f 26px);
                }

                .top3 {
                    width: 70px;
                    height: 40px;
                    position: relative;
                    background-color: #f4c064;
                    transform: skew(25deg);
                    border-radius: 0 25px 0 25px;
                    left: -60px;
                    z-index: -1;
                }

                .top3::before {
                    content: "";
                    display: block;
                    position: absolute;
                    right: -25px;
                    bottom: 0;
                    width: 25px;
                    height: 25px;
                    background: radial-gradient(circle at 100% 0, transparent 25px, #f4c064 26px);
                }
            }

            .item_bottom {
                width: 100%;
                height: max-content;
                // min-height: 210px;
                border-radius: 0 20px 20px 20px;
                background: linear-gradient(to bottom, #244e5f, #a1c6c8), linear-gradient(to right, #244e5f, #a1c6c8);
                padding: 20px;
                box-sizing: border-box;
                padding-top: 50px;
            }

            .bottom1 {
                width: 100%;
                height: 100%;
                background-color: #fcfdfd;
                border-radius: 20px;
                padding: 30px;
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 20px;

                .yinyong_item {
                    display: flex;
                    align-items: center;

                    .icon {
                        width: 60px;
                        height: 60px;
                        border-radius: 10px;
                        margin-right: 10px;
                    }

                    .name {
                        font-weight: bold;
                        font-size: 26px;
                        color: #1f4456;
                        display: flex;
                        align-items: center;
                        word-break: keep-all;
                    }
                }
            }
        }
    }
}

//大于750 屏幕
@media (min-width: 750px) {
    .list {
        width: 750px;
        height: 100vh;
        background-color: #d9e5ec;
    }
}
</style>
